<script setup>
import { onMounted,ref } from 'vue'
import { getCity } from '../api/api'
import { useRouter } from 'vue-router'
import { cityPinia } from '../stores/home'
import { storeToRefs } from 'pinia'
const cityStore = cityPinia()
const {cityId,city} = storeToRefs(cityStore)
const cityStoreChange =(id)=>{
  cityStore.$patch(state=>{
    state.cityId = id 
  })
}
const changeCity = (city)=>{
  cityStore.$patch(state=>{
    state.city = city 
  })
}
const router = useRouter();
// 纬度
const lat = ref('')
// 经度
const lng = ref('')
// 当前省份
const province = ref('')
// 当前城市
const currentCity = ref('定位中...')
// 当前区县
const district = ref('定位中...')
const cities = ref('')
const getCities = async () =>{
  let res = await getCity()
  cities.value = res.cts
}
onMounted( ()=>{
  getCities()
  // 获取定位
  if(!city.value){
    const geolocation = new BMap.Geolocation();
  geolocation.getCurrentPosition(function (r) {
    // console.log(r);
    lat.value = r.latitude
    lng.value = r.longitude
    let myGeo = new BMap.Geocoder();
      myGeo.getLocation(
        new BMap.Point(r.longitude, r.latitude),
        function (result) {
          province.value = result.addressComponents.province
          currentCity.value = result.addressComponents.city.slice(0,result.addressComponents.city.length-1)
          changeCity(currentCity.value)
          district.value = result.addressComponents.district
          cities.value.forEach(element => {
            if(element.nm == currentCity.value){
              cityStoreChange(element.id)
            }
          });
        })

  });
  }

})
</script>

<template>
  <div class="top">
    <header>
      <div class="address" @click="router.push('/position')">
        <span>{{ city?city:'定位中...' }}</span>
        <van-icon name="arrow-down" />
      </div>

      <van-search
          placeholder="请输入搜索关键词"
          background="transparent"
          shape="round"
          @click="router.push('/search')"
        />
        <!-- <div class="search">
          <input type="text">
        </div> -->
    </header>
    <div class="tab">
      <ul class="tab-list">
        <router-link to="/home">热映</router-link>
        <router-link to="/home/cinemas">影院</router-link>
        <router-link to="/home/expected">待映</router-link>
        <router-link to="/home/classic">经典电影</router-link>
      </ul>

    </div>
  </div>
    
    <router-view></router-view>
</template>

<style lang="scss" scoped>
.top{
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
}
header{
  background-color: #f03d37;
  display: flex;
  align-items: center;
  padding: 10px;
  .address{
    color: #fff;
  }
  .van-search{
    flex:1
  }
}
.tab{
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  .tab-list{
    display: flex;
    align-items: center;
    a{
      text-align: center;
      flex: 1;
      font-size: 14px;
      color: #666;
      &.router-link-exact-active{
        color: #333;
        font-weight: bold;
        font-size: 16px;
        position: relative;
        &::after{
          display: block;
          content: '';
          width: 20px;
          height: 4px;
          background-color: #f03d37;
          position: absolute;
          left: 40%;
          bottom: -10px;
        }
      }
    }
  }
}
</style>
